@charset "UTF-8";
@import "common";
@import "reset";

.wrap {
    .container {
        box-sizing: border-box;
        padding: 0 4vw;

        .name {
            margin-top: 12vw;
            width: 35.2vw;
            border-bottom: solid 0.3vw #434242;
            text-align: center;
            position: relative;
            font-size: 4vw;

            &::after {
                content: ":";
                position: absolute;
                left: 99%;
            }
        }

        .welcome {
            margin-top: 6vw;
            text-indent: 2em;
            line-height: 6vw;
            font-size: 3.5vw;
        }

        .qrcode {
            width: 36vw;
            height: 36vw;
            border: solid 0.5vw #434242;
            margin: 8vw auto 5vw;

            img {
                width: 100%;
                height: 100%;
                display: block;
            }
        }

        .save {
            margin: 0 auto;
            width: 24.9vw;
            line-height: 7.6vw;
            background-color: rgba(255, 255, 255, 0.6);
            box-shadow: 0vw 0.5vw 0.6vw 0.1vw rgba(0, 0, 0, 0.39);
            border-radius: 3.8vw;
            color: $color;
            text-align: center;
        }

        .tips {
            margin-top: 3vw;
            text-indent: 2em;
        }
    }
}
